<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出功能实现</title>
		<script src="./js/jquery-1.11.1.js"></script>
		<!-- 
		 show()    功能：显示效果
		 hide()		功能：隐藏效果
		 
		 slideDown()  向下滑动效果
		 slideUp() 向上滑动效果
		 
		 fadeIn(毫秒数) 功能：淡入  本质：显示加透明度
		 fadeOut(毫秒数) 功能：淡出 
		 -->
		<style>
			div{
				width: 500px;
				height: 500px;
				background: #ff0;
				display: none;
			}
		</style>
	</head>
	<body>
		<button class="show">按钮</button>
		<button class="hidde">隐藏</button>
		<button class="slide_down">向下滑动按钮</button>
		<button class="slide_up">向上滑动按钮</button>
		<button class="fi">淡入</button>
		<button class="fo">淡出</button>
		<div></div>
		<script>
			$(".fi").click(function(){
				$("div").fadeIn(600)
			})
			
			
			
			$(".slide_down").click(function(){
				$("div").slideDown()
			})
			$(".slide_up").click(function(){
				$("div").slideUp()
			})
			$(".show").click(function(){
				$("div").show()
			})
			$(".hidde").click(function(){
				$("div").hide()
			})
			
			
			// $("button").click(function(){
			// 	//隐藏 
			// 	$("div").css("display","none")
			// 	.css("border-radius","50%")
			// 	.css("background","#cbc9dd")
				
			// })
		</script>
	</body>
</html>